"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { User, Building2, Mail, Phone, MapPin, Calendar, Crown, MessageSquare, LogOut } from "lucide-react"

interface ProfileModalProps {
  onClose: () => void
  user: any
  onLogout: () => void
}

export function ProfileModal({ onClose, user, onLogout }: ProfileModalProps) {
  if (!user) return null

  const handleLogout = () => {
    onLogout()
    onClose()
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <User className="w-5 h-5" />
            <span>个人中心</span>
          </DialogTitle>
        </DialogHeader>

        <Tabs defaultValue="profile" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="profile">基本信息</TabsTrigger>
            <TabsTrigger value="activity">我的动态</TabsTrigger>
            <TabsTrigger value="settings">账户设置</TabsTrigger>
          </TabsList>

          <TabsContent value="profile" className="space-y-6">
            {/* 基本信息 */}
            <div className="flex items-center space-x-4">
              <Avatar className="w-20 h-20">
                <AvatarImage src={user.avatar || "/placeholder.svg"} />
                <AvatarFallback className="text-lg">{user.name?.[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <h3 className="text-xl font-semibold text-slate-900">{user.name}</h3>
                <p className="text-slate-600">
                  {user.company} · {user.position}
                </p>
                <div className="flex items-center space-x-2 mt-2">
                  {user.membership === "vip" ? (
                    <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white">
                      <Crown className="w-3 h-3 mr-1" />
                      VIP会员
                    </Badge>
                  ) : (
                    <Badge variant="outline">普通会员</Badge>
                  )}
                  <Badge variant="outline" className="text-blue-600 border-blue-200">
                    专家咨询
                  </Badge>
                </div>
              </div>
            </div>

            <Separator />

            {/* 详细信息 */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="company">公司名称</Label>
                <div className="flex items-center space-x-2">
                  <Building2 className="w-4 h-4 text-slate-400" />
                  <Input id="company" value={user.company} readOnly />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="position">职位</Label>
                <Input id="position" value={user.position} readOnly />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">邮箱</Label>
                <div className="flex items-center space-x-2">
                  <Mail className="w-4 h-4 text-slate-400" />
                  <Input id="email" value={user.email} readOnly />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">电话</Label>
                <div className="flex items-center space-x-2">
                  <Phone className="w-4 h-4 text-slate-400" />
                  <Input id="phone" value="138****8888" readOnly />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="location">所在地</Label>
                <div className="flex items-center space-x-2">
                  <MapPin className="w-4 h-4 text-slate-400" />
                  <Input id="location" value="上海市浦东新区" readOnly />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="joinDate">加入时间</Label>
                <div className="flex items-center space-x-2">
                  <Calendar className="w-4 h-4 text-slate-400" />
                  <Input id="joinDate" value="2023年3月15日" readOnly />
                </div>
              </div>
            </div>

            <Separator />

            {/* 使用统计 */}
            <div>
              <h4 className="font-medium text-slate-900 mb-3">使用统计</h4>
              <div className="grid grid-cols-4 gap-4">
                <div className="text-center p-3 bg-blue-50 rounded-lg">
                  <div className="text-2xl font-bold text-blue-600">89</div>
                  <div className="text-sm text-slate-600">已阅读</div>
                </div>
                <div className="text-center p-3 bg-green-50 rounded-lg">
                  <div className="text-2xl font-bold text-green-600">23</div>
                  <div className="text-sm text-slate-600">已收藏</div>
                </div>
                <div className="text-center p-3 bg-purple-50 rounded-lg">
                  <div className="text-2xl font-bold text-purple-600">15</div>
                  <div className="text-sm text-slate-600">已分享</div>
                </div>
                <div className="text-center p-3 bg-orange-50 rounded-lg">
                  <div className="text-2xl font-bold text-orange-600">7</div>
                  <div className="text-sm text-slate-600">已评论</div>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="activity" className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-start space-x-3 p-3 bg-slate-50 rounded-lg">
                <MessageSquare className="w-5 h-5 text-blue-600 mt-1" />
                <div className="flex-1">
                  <div className="font-medium text-slate-900">评论了文章</div>
                  <div className="text-sm text-slate-600">人工智能大模型商业化提速...</div>
                  <div className="text-xs text-slate-500 mt-1">2小时前</div>
                </div>
              </div>
              <div className="flex items-start space-x-3 p-3 bg-slate-50 rounded-lg">
                <MessageSquare className="w-5 h-5 text-green-600 mt-1" />
                <div className="flex-1">
                  <div className="font-medium text-slate-900">收藏了文章</div>
                  <div className="text-sm text-slate-600">数字经济促进条例正式实施...</div>
                  <div className="text-xs text-slate-500 mt-1">1天前</div>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="settings" className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <div className="font-medium text-slate-900">升级VIP会员</div>
                  <div className="text-sm text-slate-600">享受更多专属功能和服务</div>
                </div>
                <Button size="sm">升级</Button>
              </div>
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <div className="font-medium text-slate-900">专家咨询服务</div>
                  <div className="text-sm text-slate-600">一对一行业专家咨询</div>
                </div>
                <Button size="sm" variant="outline">
                  预约
                </Button>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <div className="flex justify-between items-center mt-6">
          <Button variant="outline" onClick={handleLogout}>
            <LogOut className="w-4 h-4 mr-2" />
            退出登录
          </Button>
          <div className="flex space-x-2">
            <Button variant="outline" onClick={onClose}>
              关闭
            </Button>
            <Button>保存修改</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
